<script setup lang="ts">
import doubtIcon from '#/assets/images/doubt.svg';
import { $t } from '@vben/locales';

interface Props {
  isMarked?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  isMarked: false,
});

const emit = defineEmits<{
  toggle: [];
}>();

const handleClick = () => {
  emit('toggle');
};
</script>

<template>
  <div 
    class="flex min-w-[60px] items-center cursor-pointer px-2 py-1 rounded transition-all duration-200 select-none hover:bg-black/5"
    @click="handleClick"
  >
    <!-- 选中状态 - 存疑图标 -->
    <div 
      v-if="isMarked" 
      class="w-4 h-4 flex items-center justify-center mr-1"
    >
      <img :src="doubtIcon" :alt="$t('examCore.questions.doubt')" width="16" height="16" />
    </div>
    
    <!-- 非选中状态 - 白色方块 -->
    <div 
      v-else 
      class="w-4 h-4 flex items-center justify-center mr-1"
    >
      <div class="w-4 h-4 bg-white border border-gray-300 rounded-sm"></div>
    </div>
    
    <span 
      class="text-xs leading-none"
      :class="isMarked ? 'text-orange-500' : 'text-gray-600'"
    >
    {{ $t('examCore.questions.doubt') }}
    </span>
  </div>
</template>

<style scoped>
/* 所有样式已使用 Tailwind CSS */
</style> 
